import React, { Component } from 'react';
import {nanoid} from 'nanoid';
import {connect} from 'react-redux';
import {addPerson} from '../../redux/actions/person';


class Person extends Component {
    addPerson=()=>{
        const name=this.nameNode.value
        const age=this.ageNode.value
        const newPerson={id:nanoid(),'name':name,'age':age}
        this.props.addPerson(newPerson)
    }
    render() {
       
        return (
            <div>
               <h1>这是person组件 {this.props.count}</h1>
               <input type="text" ref={c=>this.nameNode=c} />
               <input type="text" ref={c=>this.ageNode=c}/>
               <button onClick={this.addPerson}>添加</button>
               <br/>
               <ul>
                   {
                       this.props.persons.map((person)=>{
                         return  <li key={person.id}>姓名--{person.name},年龄---{person.age}</li>
                       })
                   }
                  
               </ul>
            </div>
        );
    }
}

const PersonContainer =connect(
   state=>({persons:state.persons,count:state.count}),
   {
       addPerson
   }
    )(Person)

export default PersonContainer

